<template>
  <div id="TestPage">
    <div class="input">
      <div class="title"><input ref="myTitle" placeholder="请输入标题..."></input></div>
      <quill-editor
          id="editor"
          v-model="content"
          ref="myQuillEditor"
          :options="editorOption"
          @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
          @change="onEditorChange($event)">
      </quill-editor>
    </div>
    <div id="panel">
      <!--      切换面板-->
      <div id="chgPanel">
        <button @click="changePanel(1)" ref="create_btn" class="btnActive1">新公告</button>
        <button @click="changePanel(2)" ref="amend_btn" class="btnActive0">修改公告</button>
      </div>
      <!--      新公告部分-->
      <div class="time_part1">当前时间：{{ date }}</div>
      <span class="panel_core" ref="create_part">
        <div class="author_part1">
          <span>作者 ：</span><input ref="author1" placeholder="图书馆"></input>
        </div>
        <div class="save_delete">
          <button class="clear_editor" @click="clear_editor">清空</button>
          <button class="save_editor" @click="save_editor">保存</button>
        </div>
      </span>
      <!--      修改公告部分-->
      <span class="none" ref="amend_part">
        <select ref="select_title" class="selectBox1" @change="selected_title">
          <option title="选择要修改的公告" v-for="(item,index) in titlelist" :value="index">{{ item }}</option>
        </select>
        <div class="time_part2">公告时间：{{ proclaim_date }}</div>
        <div class="time_part3">
            <span>修改时间 ：</span>
            <div class="time_part3_right">
            <select ref="s_year" class="selectBox2" @change="selected_time">
              <option title="选择要修改的公告" v-for="(item,index) in yearlist" :value="index">{{ item }}</option>
            </select><span>年</span>
            <select ref="s_month" class="selectBox2" @change="selected_time">
              <option title="选择要修改的公告" v-for="(item,index) in monthlist" :value="index">{{ item }}</option>
            </select><span>月</span>
            <select ref="s_day" class="selectBox2" @change="selected_time">
              <option title="选择要修改的公告" v-for="(item,index) in daylist" :value="index">{{ item }}</option>
            </select><span>日 </span>
            <select ref="s_hour" class="selectBox2" @change="selected_time">
              <option title="选择要修改的公告" v-for="(item,index) in hourlist" :value="index">{{ item }}</option>
            </select><span> : </span>
            <select ref="s_minute" class="selectBox2" @change="selected_time">
              <option title="选择要修改的公告" v-for="(item,index) in minutelist" :value="index">{{ item }}</option>
            </select><span> : </span>
            <select ref="s_seconds" class="selectBox2" @change="selected_time">
              <option title="选择要修改的公告" v-for="(item,index) in secondslist" :value="index">{{ item }}</option>
            </select>
            </div>
        </div>
        <div class="author_part2">
          <span>修改作者 ：</span><input ref="author2"></input>
        </div>
        <div class="save_delete">
        <button id="save_amend_proclaim" @click="amend_editor">保存</button>
        <button id="delete_proclaim" @click="delete_editor">删除</button>
        </div>
      </span>
    </div>
  </div>
</template>

<script>
import {mapGetters, mapMutations, mapState} from 'vuex';

export default {
  name: "TestPage",
  data() {
    return {
      editorOption: {
        // placeholder设置提示词
        placeholder: '请输入正文......',
        // modules设置工具栏
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block'],
            ['formula'],
            ['clean'],
            ['link', 'image', 'video'],
            [{'header': 1}, {'header': 2}],
            [{'list': 'ordered'}, {'list': 'bullet'}],
            [{'script': 'sub'}, {'script': 'super'}],
            [{'indent': '-1'}, {'indent': '+1'}],
            [{'direction': 'rtl'}],
            [{'size': ['small', false, 'large', 'huge']}],
            [{'header': [1, 2, 3, 4, 5, 6, false]}],
            [{'color': []}, {'background': []}],
            [{'font': []}],
            [{'align': []}]
          ]
        }
      },
      yearlist: [],
      monthlist: [],
      daylist: [],
      hourlist: [],
      minutelist: [],
      secondslist: [],
      content: null,
      date: "",
      proclaim_date: "2000-1-01 01:01:00",
      titlelist: {}
    }
  },
  methods: {
    ...mapMutations(['saveNewProclaim', 'deleteProclaim', 'amendProclaim']),
    onEditorBlur() {//失去焦点事件
    },
    onEditorFocus() {//获得焦点事件
    },
    onEditorChange() {//内容改变事件
    },
    save_editor() {
      let title = this.$refs.myTitle.value
      if (this.checkTitle(title)===0){
      let author = this.$refs.author1.value
      let date = this.date
      if (author === "") {
        author = "图书馆"
      }
      let content = this.$refs.myQuillEditor.quill.root.innerHTML
      this.saveNewProclaim({
        title: title,
        author: author,
        date: date,
        html: content
      })
      this.$message.success('保存成功');
      this.titlelist = this.getTitleList
      }else{
        this.$message.error('标题重名，请修改！');
        this.$refs.myTitle.value="";
        this.$refs.myTitle.focus()
      }
    },
    clear_editor() {
      this.$refs.myTitle.value = ""
      this.$refs.myQuillEditor.quill.root.innerHTML = ""
      this.$refs.author1.value = ""
    },

    amend_editor() {
      let title = this.$refs.myTitle.value
      let author = this.$refs.author2.value
      let content = this.$refs.myQuillEditor.quill.root.innerHTML
      this.proclaim_date = this.date
      this.amendProclaim({
        title: title,
        author: author,
        date: this.proclaim_date,
        html: content
      });
      this.$message.success('修改成功');
      this.titlelist = this.getTitleList
      this.selected_title()
    },
    initialize() {
      this.titlelist = this.getTitleList
      this.selected_title()
    },
    changePanel(num) {
      if (num === 1) {
        this.$refs.amend_part.className = "none"
        this.$refs.create_part.className = "panel_core"
        this.$refs.create_btn.className = "btnActive1"
        this.$refs.amend_btn.className = "btnActive0"
        this.clear_editor()
      } else if (num === 2) {
        this.$refs.amend_part.className = "panel_core"
        this.$refs.create_part.className = "none"
        this.$refs.create_btn.className = "btnActive0"
        this.$refs.amend_btn.className = "btnActive2"
        this.selected_title()
      }
    },
    convert_time(text) {
      let time = text.split(' ')
      let time1 = time[0].split('-')
      let time2 = time[1].split(':')
      let index_y = this.yearlist.findIndex(n => n === time1[0])
      let index_month = this.monthlist.findIndex(n => n === time1[1])
      let index_d = this.daylist.findIndex(n => n === time1[2])
      let index_h = this.hourlist.findIndex(n => n === time2[0])
      let index_minute = this.minutelist.findIndex(n => n === time2[1])
      let index_s = this.secondslist.findIndex(n => n === time2[2])
      this.$refs.s_year[index_y].selected = true
      this.$refs.s_month[index_month].selected = true
      this.$refs.s_day[index_d].selected = true
      this.$refs.s_hour[index_h].selected = true
      this.$refs.s_minute[index_minute].selected = true
      this.$refs.s_seconds[index_s].selected = true
    },
    selected_title() {
      let title = this.titlelist[this.$refs.select_title.selectedIndex]
      if (title !== "") {
        let get_content = this.getProclaim(title)
        this.proclaim_date = get_content.date
        this.convert_time(get_content.date)
        this.$refs.myQuillEditor.quill.root.innerHTML = get_content.html
        this.$refs.myTitle.value = get_content.title
        this.$refs.author2.value = get_content.author
      } else {
        this.clear_editor()
        this.date = "2000-01-01 00:00:00"
        this.convert_time("2000-01-01 00:00:00")
      }
    },
    selected_time() {
      let year = this.yearlist[this.$refs.s_year.selectedIndex]
      let month = this.monthlist[this.$refs.s_month.selectedIndex]
      let day = this.daylist[this.$refs.s_day.selectedIndex]
      let hour = this.hourlist[this.$refs.s_hour.selectedIndex]
      let minute = this.minutelist[this.$refs.s_minute.selectedIndex]
      this.proclaim_date = year + "-" + month + "-" + day + " " + hour + ":" + minute + ":00"
    },
    delete_editor() {
      this.deleteProclaim(this.titlelist[this.$refs.select_title.selectedIndex])
      this.$message.success('删除成功');
      this.initialize()
    },
    get_time() {
      let d = new Date();
      let t = d.getTime()
      let date = new Date(t);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let year = date.getFullYear(),
          month = ("0" + (date.getMonth() + 1)).slice(-2),
          sdate = ("0" + date.getDate()).slice(-2),
          hour = ("0" + date.getHours()).slice(-2),
          minute = ("0" + date.getMinutes()).slice(-2),
          second = ("0" + date.getSeconds()).slice(-2);
      // 拼接返回
      this.date = year + "-" + month + "-" + sdate + " " + hour + ":" + minute + ":" + second
    }
  },
  computed: {
    ...mapState(['prolist']),
    ...mapGetters(['getProclaim', 'getTitleList','checkTitle']),
  },
  created() {
    this.titlelist = this.getTitleList //初始化标题数组
    for (let i = 2000; i <= 2050; i++) {
      this.yearlist.push(String(i))
    }
    for (let i = 1; i <= 12; i++) {
      if (i < 10) {
        this.monthlist.push(String("0" + i))
      } else {
        this.monthlist.push(String(i))
      }
    }
    for (let i = 1; i <= 31; i++) {
      if (i < 10) {
        this.daylist.push(String("0" + i))
      } else {
        this.daylist.push(String(i))
      }
    }
    for (let i = 0; i <= 23; i++) {
      if (i < 10) {
        this.hourlist.push(String("0" + i))
      } else {
        this.hourlist.push(String(i))
      }
    }
    for (let i = 0; i < 60; i++) {
      if (i < 10) {
        this.minutelist.push(String("0" + i))
      } else {
        this.minutelist.push(String(i))
      }
    }
    for (let i = 0; i < 60; i++) {
      if (i < 10) {
        this.secondslist.push(String("0" + i))
      } else {
        this.secondslist.push(String(i))
      }
    }
  },
  mounted() {
    setInterval(() => {
      this.get_time()
    }, 1000)
  }
}
</script>

<style scoped>
#TestPage {
  width: 100%;
  height: 100%;
  display: flex;
}

.input {
  width: 80%;
  height: 600px;
  margin: 10px 30px;
}

.title {
  width: 100%;
  height: 30px;
  margin-bottom: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #d6d6d6;
  background: #f6f6f6;
}

.title input {
  width: 97%;
  height: 95%;
  border: none;
  background: #f6f6f6;
}

.title input::-webkit-input-placeholder {
  font-style: italic;
}

.title input:focus-visible {
  outline: none;
}

#editor {
  width: 100%;
  height: 610px;
}

#editor >>> .ql-container {
  background: #f6f6f6;
}

#panel {
  width: 300px;
  margin: 10px 30px 0 0;
}

#chgPanel {
  width: 100%;
  height: 25px;
  border: 1px solid #dadada;
}

.btnActive0 {
  width: 50%;
  height: 100%;
  border: none;
  padding: 0;
  font-size: 18px;
  font-weight: bold;
  color: #9e9e9e;
}

.btnActive1 {
  width: 50%;
  height: 100%;
  border: none;
  padding: 0;
  background: #14e90c;
  font-size: 18px;
  font-weight: bold;
  color: white;
  box-shadow: 0px 0px 5px 1px #d5d5d5;
}

.btnActive1:hover {
  background: #2bda24;
  color: #f1f1f1;
  transition: all 0.5s cubic-bezier(0.04, 0.63, 0.71, 1.15);
}

.btnActive2 {
  width: 50%;
  height: 100%;
  border: none;
  padding: 0;
  background: #ff7200;
  font-size: 18px;
  font-weight: bold;
  color: white;
  box-shadow: 0px 0px 5px 1px #d5d5d5;
}

.btnActive2:hover {
  background: #e0751f;
  color: #f1f1f1;
  transition: all 0.5s cubic-bezier(0.04, 0.63, 0.71, 1.15);
}


.panel_core {
  width: 100%;
  height: auto;
  margin-top: 5px;
  float: left;
}

.time_part1 {
  width: 100%;
  height: 25px;
  text-align: center;
  margin-top: 5px;
  background: #efefef;
  color: #444444;
  cursor: default;
}

.time_part2 {
  width: 100%;
  height: 25px;
  text-align: center;
  margin-top: 5px;
  background: #efefef;
  color: #444444;
  float: left;
  cursor: default;
}

.time_part3 {
  width: 100%;
  height: 25px;
  text-align: center;
  margin-top: 5px;
  background: #efefef;
  color: #444444;
  float: left;
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: default;
}

.time_part3 select {
  cursor: pointer;
}

.time_part3 span {
  line-height: 25px;
}

.time_part3 span:first-child {
  padding-left: 8px;
  width: 85px;
  height: 100%;
  color: white;
  background: #ff7200;
  border: 1px solid #ff7200;
  border-radius: 2px 0 0 2px;
}

.time_part3_right {
  flex-grow: 1;
  height: 100%;
  padding-left: 5px;
  display: flex;
  align-items: center;
  border: 1px solid #c1c1c1;
  border-radius: 0 2px 2px 0;
}

.clear_editor {
  width: 100px;
  height: 100%;
  font-size: 15px;
  border-left: 1px solid #c1c1c1;
  border-top: 1px solid #c1c1c1;
  border-bottom: 1px solid #c1c1c1;
  border-right: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.clear_editor:hover {
  background: #438aff;
  color: white;
}

.save_editor {
  flex-grow: 1;
  height: 100%;
  font-size: 15px;
  border-right: 1px solid #c1c1c1;
  border-top: 1px solid #c1c1c1;
  border-bottom: 1px solid #c1c1c1;
  border-left: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.save_editor:hover {
  background: #14e90c;
  color: white;
}


.selectBox1 {
  width: 100%;
  height: 25px;
  font-size: 15px;
  text-align: center;
  background: #efefef;
  border: 1px solid #c1c1c1;
  outline: none;
}

.selectBox2 {
  height: 17px;
  font-size: 15px;
  text-align: center;
  background: #efefef;
  border: none;
  outline: none;
  -webkit-appearance: none;
}

.save_delete {
  width: 100%;
  height: 25px;
  margin-top: 5px;
  float: left;
  display: flex;
}

#save_amend_proclaim {
  flex-grow: 1;
  height: 100%;
  margin-top: 5px;
  font-size: 15px;
  border-left: 1px solid #c1c1c1;
  border-top: 1px solid #c1c1c1;
  border-bottom: 1px solid #c1c1c1;
  border-right: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

#save_amend_proclaim:hover {
  background: #14e90c;
  color: white;
  border: 1px solid #c1c1c1;
  border-right: none;
}

#delete_proclaim {
  width: 89px;
  height: 25px;
  margin-top: 5px;
  font-size: 15px;
  border-top: 1px solid #c1c1c1;
  border-bottom: 1px solid #c1c1c1;
  border-right: 1px solid #c1c1c1;
  border-left: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

#delete_proclaim:hover {
  background: #ff0000;
  color: white;
  border: 1px solid #c1c1c1;
  border-left: none;
}

.author_part1 {
  width: 100%;
  height: 25px;
  margin-top: 5px;
  float: left;
  display: flex;
  align-items: center;
  color: #444444;
  background: #efefef;
  border: 1px solid #cfcfcf;
  border-radius: 2px;
}

.author_part1 span {
  line-height: 25px;
}

.author_part1 span:first-child {
  width: 55px;
  height: 100%;
  padding-left: 8px;
}

.author_part1 input {
  flex-grow: 1;
  height: 100%;
  padding: 0 0 0 5px;
  outline: none;
  border: none;
  background: none;
}

.author_part2 {
  width: 100%;
  height: 25px;
  margin-top: 5px;
  float: left;
  display: flex;
  align-items: center;
  color: #444444;
  background: #efefef;
  cursor: default;
  border-radius: 2px;
}

.author_part2 span {
  line-height: 25px;
}

.author_part2 span:first-child {
  width: 85px;
  height: 100%;
  padding-left: 8px;
  color: white;
  background: #ff7200;
  border: 1px solid #ff7200;
  border-radius: 2px 0 0 2px;
}

.author_part2 input {
  flex-grow: 1;
  height: 100%;
  padding: 0 0 0 5px;
  border: 1px solid #c1c1c1;
  outline: none;
  background: none;
  border-radius: 0 2px 2px 0;
}
</style>